<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>商品销量饼图</title>
		<script type="text/javascript" src="js/echarts.js" ></script>
	</head>
	<body>
		<div id="goods" style="height: 200px; width: 400px;">
			<script>
	var myCharts = echarts.init(document.getElementById("goods"),"dark");
	var option={
	      title:{
	      	text:'产品销量',
	      	left:'center'
	      },
    tooltip:{
    	trigger:'item',
    	formatter:'{a}<br/>{b}:{c}({d}%)'
    },
    legend:{
    	top:'10%',
    	orient:"vertical",
    	left:'left',
    	data:['鼠标','键盘','U盘','主板','显示器']
    },
    series:[
    {
    	name:'所售商品',
        type:'pie',
        radius:['0%','80%'],/*[内环，外环]*/
        data:[
        {value:300,name:'鼠标'},
        {value:400,name:'键盘'},
        {value:350,name:'U盘'},
        {value:500,name:'主板'},
        {value:560,name:'显示器'}
        ]
     }
    ]
    };
    myCharts.setOption(option);
    </script>
		</div>
	</body>
</html>
